<template>
  <div class="header-box">
    <img
      class="header-pic"
      src="@/assets//3d_icon//direction.png"
      alt=""
    />
    <img class="bgc-pic" src="@/assets//3d_icon//header-icon.png" alt="" />
    <div class="name">{{ name }}</div>
    <div class="icon">
      <!-- 删除按钮 -->
      <img v-if="type === 'edl'" src="@/assets/3d_icon//del-icon.png" alt="" />
      <!-- 添加按钮 -->
      <img
        v-else-if="type === 'add'"
        src="@/assets//3d_icon//add-icon.png"
        alt=""
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  watch: {
    name(old, newVal) {
      // console.log("old==", old);
    },
    type() {},
  },
};
</script>
<style lang="scss" scoped>
.header-box {
  height: 40px;
  margin: 10px 18px 0 10px;
  box-sizing: border-box;
  display: flex;
  position: relative;

  .bgc-pic {
    margin-top: 24px;
    margin-left: -6px;
    width: 100%;
    height: 14px;
    box-sizing: border-box;
  }

  .header-pic {
    margin-top: 10px;
    width: 23px;
    height: 20px;
  }
  .name {
    position: absolute;
    top: 7px;
    left: 28px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #5098ff;
  }
  .icon {
    position: absolute;
    top: 11px;
    right: 0;
    width: 21px;
    height: 21px;
    // background-color: #5098ff;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
